<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>react_13_使用createRef来创建refs</title>
</head>
<body>
    <div id="test"></div>

    <!-- 引入react 核心库 -->
    <script type="text/javascript" src="./js/react.development.js"></script>
    <!-- 引入react-dom 用于支持react操作dom -->
    <script type="text/javascript" src="./js/react-dom.development.js"></script>
    <!-- 引入babel 用于讲jsx转成js -->
    <script type="text/javascript" src="./js/babel.min.js"></script>
    <!-- 注意：从8开始需要引入一个新的js文件了，目的是对props加上限制 -->
    <script type="text/javascript" src="./js/prop-types.js"></script>

    <!-- 组 件 -->
    <script type="text/babel">
        //非受控性组件，代码里面有很多refs。现用现取。
        //因为react官方说了，别用一大堆的refs。所以建议使用非受控性组件，把表单信息放在state里面！！！
       class Form extends React.Component{
           login = (event)=>{
               //阻止默认事件
               event.preventDefault()
               const {username,password} = this
               alert(`用户名：${username.value},密码:${password.value}`)
           }
           render() {
               return (
                   <div>
                       <form action="www.baidu.com" onSubmit={this.login}>
                           用户名：<input ref={c=>this.username = c} type="text" name="username"/>
                           <br/>
                           密码：<input ref={c=>this.password = c} type="text" name="password"/>
                           <br/>
                           <button>登录</button>
                       </form>
                   </div>
               );
           }
       }
       ReactDOM.render(<Form/>,document.getElementById('test'))
    </script>
</body>

</html>